<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商" style="margin-right:15px" label-width="110px" prop="shipmentCode">
              <el-input v-model="form.shipmentName" :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="批次规则名称" style="margin-right:15px" label-width="110px" prop="name">
              <el-input v-model="form.name" placeholder="请输入批次规则名称" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px" label-width="110px">
              <el-input v-model="form.remarks" placeholder="请输入备注" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-checkbox v-model="form.lot" label="收货批次"></el-checkbox>
        <el-checkbox v-model="form.gmtManufacture" label="生产日期"></el-checkbox>
      </div>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-checkbox v-model="form.gmtExpire" label="过期日期"></el-checkbox>
        <el-checkbox v-model="form.gmtStock" label="存货日期"></el-checkbox>
      </div>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-checkbox label="供应商" v-model="form.supplier"></el-checkbox>
        <el-checkbox label="序列号" v-model="form.serialNumber"></el-checkbox>
      </div>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-checkbox label="生产批号" v-model="form.extendOne"></el-checkbox>
        <el-checkbox label="商品批次" v-model="form.extendTwo"></el-checkbox>
      </div>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-checkbox label="扩展3" v-model="form.extendThree"></el-checkbox>
        <el-checkbox label="扩展4" v-model="form.extendFour"></el-checkbox>
      </div>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-checkbox label="扩展5" v-model="form.extendFive"></el-checkbox>
        <el-checkbox label="扩展6" v-model="form.extendSix"></el-checkbox>
      </div>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="funcSubmit">确 定</el-button>
        </div>
      </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { batchRuleEdit,batchRuleDetail} from '@/api/basicInfo'
Vue.use(VXETable)
export default {
  props: {
    operationCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {
        code:'',                               //数据标识 ,
        extendFive:'',                         //扩展5 ,
        extendFour:'',                         //扩展4 ,
        extendOne:'',                          //生产批号 ,
        extendSix:'',                          //扩展6 ,
        extendThree:'',                        //扩展3 ,
        extendTwo:'',                          //商品批次 ,
        gmtExpire:'',                          //过期日期 ,
        gmtManufacture:'',                     //生产日期 ,
        gmtStock:'',                           //存货日期 ,
        lot:'',                                //批次 ,
        name:'',                               //名称 ,
        remarks:'',                            //备注 ,
        serialNumber:'',                       //序列号 ,
        shipmentCode: '',                        //所属入驻商 ,
        shipmentName: '',                        //所属入驻商 ,
        supplier:'',                           //供应商 ,
        state:'0',
      },
        rules: {
          name: [
            {required: true, message: '请输入批次规则名称', trigger: 'blur'},
          ],
          shipmentCode: [
            {required: true, message: '请选择所属入驻商', trigger: 'blur'},
          ],
        },
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 获取页面信息
    getInfo() {
      batchRuleDetail(this.operationCode).then(response => {
        this.form = response.data
        for(let key in this.form ){
          if(this.form[key] === 0){
            this.form[key] = false
          }
          if(this.form[key] === 1){
            this.form[key] = true
          }
        }

        // this.$message({ message: response.msg, type: 'success' })
      })
    },
    // 提交
    funcSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let arr = this.form
            for(let key in arr ){
              if(arr[key] === false){
                arr[key] = 0
              }
              if(arr[key] === true){
                arr[key] = 1
              }
            }
            const data = arr

            const rLoading = this.openLoading();
            batchRuleEdit(data).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
              this.$emit('fatherEditMethod')
            })
          } else {
            return false
          }
        })
    },

    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'edit')
    }

  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
